<template>
  <div style="border-bottom: 1px solid #373838">
    <el-collapse-item :title="$t('漏斗图设置')" name="3">
      <el-form-item :label="$t('最小值')">
        <el-input-number
          v-model="myConfig.min"
          :min="0"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item :label="$t('最大值')">
        <el-input-number
          v-model="myConfig.max"
          :min="myConfig.min"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item :label="$t('最小尺寸')">
        <el-slider
          v-model="myConfig.minSize"
          :show-tooltip="false"
          class="slider136 r_margin_right8"
        />
        <el-input
          v-model.number="myConfig.minSize"
          class="r_56width"
          oninput="value=value.replace(/[^\d]/g,'')"
          ><span slot="suffix" style="line-height: 32px">%</span>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('最大尺寸')">
        <el-slider
          v-model="myConfig.maxSize"
          :show-tooltip="false"
          class="slider136 r_margin_right8"
        />
        <el-input
          v-model.number="myConfig.maxSize"
          class="r_56width"
          oninput="value=value.replace(/[^\d]/g,'')"
          ><span slot="suffix" style="line-height: 32px">%</span>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('图形宽度')">
        <el-slider
          v-model="myConfig.width"
          :show-tooltip="false"
          class="slider136 r_margin_right8"
        />
        <el-input
          v-model.number="myConfig.width"
          class="r_56width"
          oninput="value=value.replace(/[^\d]/g,'')"
          ><span slot="suffix" style="line-height: 32px">%</span>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('左边距')">
        <el-slider
          v-model="myConfig.left"
          :show-tooltip="false"
          class="slider136 r_margin_right8"
        />
        <el-input
          v-model.number="myConfig.left"
          class="r_56width"
          oninput="value=value.replace(/[^\d]/g,'')"
          ><span slot="suffix" style="line-height: 32px">%</span>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('上下边距')">
        <!-- <el-input-number
          v-model="myConfig.top"
          :min="0"
          controls-position="right"
        /> -->
        <span
          class="r_96width r_margin_right8 l_input_span"
          style="color: #a2a2a2"
        >
          <el-input-number
            v-model="myConfig.top"
            controls-position="right"
            class="r_96width l_input_number"
          >
          </el-input-number>
          <span class="l_input_num2">上</span>
        </span>
        <span class="r_96width l_input_span" style="color: #a2a2a2">
          <el-input-number
            v-model="myConfig.bottom"
            controls-position="right"
            class="r_96width l_input_number"
          >
          </el-input-number>
          <span class="l_input_num2">下</span>
        </span>
      </el-form-item>
      <el-form-item :label="$t('数据排序')">
        <l-select :options="sortOptions" v-model="myConfig.sort" />
      </el-form-item>
      <el-form-item :label="$t('数据间距')">
        <el-input-number
          v-model="myConfig.gap"
          :min="0"
          controls-position="right"
        />
      </el-form-item>
    </el-collapse-item>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      sortOptions: [
        { value: "ascending", label: "升序" },
        { value: "descending", label: "降序" },
        { value: "none", label: "无" },
      ],
    };
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
};
</script>